<template>
  <div>
    <div class="nav">
        <el-input v-model="input" placeholder="请输入内容" class="input"></el-input>
        <el-button type="primary" class="btn">查询</el-button>
        <el-button class="btn" @click="add">新增</el-button>
    </div>
    <div class="main">
      <el-table :data="tableData"
                style="width: 100%"
                max-height=780px>
        <el-table-column :fixed="true" width="100" prop="id" label="用户编码"/>
        <el-table-column  width="160" prop="state" label="状态"/>
        <el-table-column width="120" prop="name" label="用户姓名"/>
        <el-table-column width="160" prop="sex" label="性别"/>
        <el-table-column width="100" prop="dept" label="所属部门"/>
        <el-table-column width="120" prop="position" label="职位"/>
        <el-table-column width="160" prop="birthday" label="生日"/>
        <el-table-column width="160" prop="induction" label="入职日期"/>
        <el-table-column width="120" prop="phone" label="电话号码"/>
        <el-table-column width="300" prop="email" label="用户住址"/>
        <el-table-column width="200" prop="remark" label="备注"/>
        <el-table-column fixed="right"
                         label="操作"
                         width="100">
          <template v-slot="scope">
            <el-button type="text" @click="editEvt(scope)" size="small">编辑</el-button>
            <el-popconfirm title="这是一段内容确定删除吗？">
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[20, 50, 100, 200]"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"/>
    </div>
  </div>
</template>

<script>
import { userListApi } from '../../apis/loginApi'
export default {
  data() {
    return {
      input:'',
      tableData: [],
      total: 0,
      page: 1,
      size: 20,
      timer: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCurrentChange(_page) {
      console.log('------------------------- handleCurrentChange', _page, this.page)
      this.page = _page
      if (!!this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getList()
      }, 250)
    },
    handleSizeChange(_size) {
      console.log('------------------------- handleSizeChange', _size, this.size)
      this.size = _size
      if (!!this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getList()
      }, 250)
    },
    getList() {
      userListApi({page: this.page, size: this.size}).then(d => {
        if (d.code === 200) {
          this.tableData = d.data.rows
          this.total = d.data.count
        }
      })
    },
    editEvt(scope) {
      console.log(scope)
    },
    add(){
      this.$router.push('/edit')
    }
  }
}
</script>

<style lang="less" scoped>
.nav {
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: solid 1px #999;
  overflow: hidden;
  display: flex;
  justify-content: right;
  >.input{
    width: 240px;
  }
  >.btn{
    margin-left: 8px;
    margin-bottom: 5px;
  }
}
</style>
